<template>
  <div>
    <el-dialog :title="className+'-班级巡班人员'" :visible.sync="dialogVisible" :close-on-click-modal="false"
               :close-on-press-escape="false" @close="$emit('update:visible',false)">
      <div style="padding: 40px 0;">
        <div class="" v-if="detailOption.length">
          <div class="teach-list-popver" v-for="item in detailOption" :key="item.id">
            <div class="teach-list-popver-img">
              <img src="@/assets/imageAdmin/defultimg.jpg" alt="" v-if="!item.pic">
              <img :src="$BASE_URL+item.pic" alt="" v-else>
            </div>
            <div class="teach-list-popver-name">
              老师：<span>{{ item.realname }}</span>
            </div>
            <!--            <div class="teach-list-popver-time" v-if="item.is_sign">-->
            <!--              <p>签到时间：{{ item.time }}</p>-->
            <!--              <p v-if="item.remark">备注：{{ item.remark }}</p>-->
            <!--            </div>-->
          </div>
        </div>
        <div v-else class="list-line-box">
          未设置相关巡班人员
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closePOpup">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: 'Dialog',
  props: ['visible', 'classId', 'className'],
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.getDetail()
      } else {
        this.detailOption = []
      }
    }
  },
  data() {
    return {
      teacherVisible: false,
      dialogVisible: this.visible,
      detailOption: []
    }
  },
  created() {

  },
  methods: {
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    // 获取详情信息
    async getDetail() {
      let data = await this.$fetch(this.api.classActive.training.index, {class_id: this.classId})
      this.detailOption = data.list.data.length ? data.list.data[0].user_ids : [];
    }
  }
}
</script>
<style>
.user-list {
  display: flex;
  align-items: center;
}

.teach-list-popver {
  display: flex;
  padding: 15px;
  background: #ffc380;
  margin-bottom: 10px;
  border-radius: 5px;
  align-items: center;
}

.teach-list-popver:last-child {
  border-bottom: none
}

.teach-list-popver-img {
  width: 60px;
  height: 60px;
  margin-right: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.teach-list-popver-img img {
  width: 100%;
  height: 100%;
}

.teach-list-popver-name {
  font-size: 18px;
  flex: 1;
}

.teach-list-popver-name span {
  font-weight: bold;
}

.teach-list-popver-sign span {
  padding: 10px 20px;
  border-radius: 4px;
  color: #000;
  cursor: pointer;
}

.list-line-box {
  text-align: center;
}
</style>
